<div class="ui pointing secondary menu order">
  <a class="item {o_tab.first?'active':''}" on-click="{this.active('first')}">日销售总报</a>
  <a class="item {o_tab.second?'active':''}" on-click="{this.active('second')}">自营日销售总报</a>
  <a class="item {o_tab.third?'active':''}" on-click="{this.active('third')}">月销售总报</a>
  <a class="item {o_tab.four?'active':''}" on-click="{this.active('four')}">月库存总报</a>
</div>

<div class="ui bottom attached tab segment {o_tab.first?'active':''}">
  <h1 class="ui header">日销售总报表<span style="margin-left: 100px;">{dailys.month}</span></h1>


  <app-datepicker state={@(this.$state)} config="{config}" searchState={searchDaily} on-select={this.searchDaily($event)}></app-datepicker>
  <a class="ui button large right floated" tabindex="0" on-click="{this.export('#searchDaily','日销售总报表.csv',$event)}">
    导出
  </a>
  <table id="searchDaily" class="ui celled table">
    <thead>
    <tr>
      {#list order_items as item}
      <th>{item}</th>
      {/list}
    </tr>
    </thead>
    <tbody>
    {#list dailys.data as daily}
    <tr>
      <td>{daily.date |replace:shops.month}</td>
      <td>{daily.order_count}</td>
      <td>{daily.product_count}</td>
      <td>{this.formatNum(daily.sales,2)}</td>
      <td>{this.formatNum(daily.cost,2)}</td>
      <td>{this.formatNum(daily.profit,2)}</td>
      <td>{this.formatNum(daily.profit_rate,2)}%</td>
      <td>{this.formatNum(daily.freight,2)}</td>
      <td>{this.formatNum(daily.in_freight,2)}</td>
      <td>{this.formatNum(daily.packing,2)}</td>
      <td>{this.formatNum(daily.point,2)}</td>
      <td>{this.formatNum(daily.sales_profit,2)}</td>
      <td>{this.formatNum(daily.sales_profit_rate,2)}%</td>
      <td>{this.formatNum(daily.tax,2)}</td>
      <td>{this.formatNum(daily.amortization,2)}</td>
      <td>{this.formatNum(daily.net_profit,2)}</td>
      <td>{this.formatNum(daily.net_profit_rate,2)}%</td>
      <td>{this.formatNum(daily.order_price,2)}</td>
    </tr>
    {/list}
    </tbody>
  </table>
</div>
<div class="ui bottom attached tab segment {o_tab.second?'active':''}">
  <h1 class="ui header">自营日销售总报表<span style="margin-left: 100px;">{shops.month}</span></h1>

  <app-datepicker state={@(this.$state)} config="{config}"searchState={searchShop} on-select={this.searchShop($event)}></app-datepicker>
  <a class="ui button large right floated" tabindex="0" on-click="{this.export('.searchShop','自营日销售总报表.csv',$event)}">
    导出
  </a>
  {#list shops.data as shop}
  <table class="searchShop ui celled table">
    <thead>
    <tr>
      <th colspan="18">{shop.name}</th>
    </tr>
    <tr>
      {#list order_items as item}
      <th>{item}</th>
      {/list}
    </tr>
    </thead>
    <tbody>
    {#list shop.datas as data}
    <tr>
      <td>{data.date |replace:shops.month}</td>
      <td>{data.order_count}</td>
      <td>{data.product_count}</td>
      <td>{this.formatNum(data.sales,2)}</td>
      <td>{this.formatNum(data.cost,2)}</td>
      <td>{this.formatNum(data.profit,2)}</td>
      <td>{this.formatNum(data.profit_rate,2)}%</td>
      <td>{this.formatNum(data.freight,2)}</td>
      <td>{this.formatNum(data.in_freight,2)}</td>
      <td>{this.formatNum(data.packing,2)}</td>
      <td>{this.formatNum(data.point,2)}</td>
      <td>{this.formatNum(data.sales_profit,2)}</td>
      <td>{this.formatNum(data.sales_profit_rate,2)}%</td>
      <td>{this.formatNum(data.tax,2)}</td>
      <td>{this.formatNum(data.amortization,2)}</td>
      <td>{this.formatNum(data.net_profit,2)}</td>
      <td>{this.formatNum(data.net_profit_rate,2)}%</td>
      <td>{this.formatNum(data.order_price,2)}</td>
    </tr>
    {/list}
    </tbody>
  </table>
  {/list}

</div>
<div class="ui bottom attached tab segment {o_tab.third?'active':''}">
  <h1 class="ui header">月销售总报表<span style="margin-left: 100px;">{monthlys.month}</span></h1>

  <app-datepicker state={@(this.$state)} config="{config}"searchState={searchMonthly} on-select={this.searchMonthly($event)}></app-datepicker>
  <a class="ui button large right floated" tabindex="0" on-click="{this.export('#searchMonthly','月销售总报表.csv',$event)}">
    导出
  </a>
  <table id="searchMonthly" class="ui celled table">
    <thead>
    <tr>
      <th>平台</th>
      {#list order_items as item}
        {#if item!='日期'}
        <th>{item}</th>
        {/if}
      {/list}
    </tr>
    </thead>
    <tbody>
    {#list monthlys.data as monthly}
    <tr>
      <td>{monthly.shop_name}</td>
      <td>{monthly.order_count}</td>
      <td>{monthly.product_count}</td>
      <td>{this.formatNum(monthly.sales,2)}</td>
      <td>{this.formatNum(monthly.cost,2)}</td>
      <td>{this.formatNum(monthly.profit,2)}</td>
      <td>{this.formatNum(monthly.freight,2)}</td>
      <td>{this.formatNum(monthly.packing,2)}</td>
      <td>{this.formatNum(monthly.point,2)}</td>
      <td>{this.formatNum(monthly.tax,2)}</td>
      <td>{this.formatNum(monthly.sales_profit,2)}</td>
      <td>{this.formatNum(monthly.sales_profit_rate,2)}%</td>
      <td>{this.formatNum(monthly.amortization,2)}</td>
      <td>{this.formatNum(monthly.net_profit,2)}</td>
      <td>{this.formatNum(monthly.net_profit_rate,2)}%</td>
    </tr>
    {/list}
    </tbody>
  </table>
</div>


<div class="ui bottom attached tab segment {o_tab.four?'active':''}">
  <h1 class="ui header">月库存总报表<span style="margin-left: 100px;">{stores.month}</span></h1>

  <app-datepicker state={@(this.$state)} config="{config}"searchState={searchStore} on-select={this.searchStore($event)}></app-datepicker>
  <a class="ui button large right floated" tabindex="0" on-click="{this.export('#searchStore','月库存总报表.csv',$event)}">
    导出
  </a>
  <table id="searchStore" class="ui celled table">
    <thead>
    <tr>
      <th>编号</th>
      {#list store_items as item}
      <th>{item}</th>
      {/list}
    </tr>
    </thead>
    <tbody>
    {#list stores.data as store}
    <tr>
      <td>{store_index+1}</td>
      <td>{store.product_name}</td>
      <td>{store.bar_code}</td>
      <td>{store.in_count}</td>
      <td>{store.out_count}</td>
      <td>{store.begin_stock}</td>
      <td>{store.in_stock}</td>
      <td>{store.out_stock}</td>
      <td>{store.end_stock}</td>
      <td>{this.formatNum(store.cost,2)}</td>
      <td>{this.formatNum(store.cost*store.end_stock,2)}</td>
    </tr>
    {/list}
    </tbody>
  </table>
</div>